<template>
  <div class="assign">
    <el-dialog :visible.sync="isShow" title="分配权限">
      <el-tree
        :data="treeDate"
        check-strictly
        show-checkbox
        node-key="id"
        default-expand-all
        :default-checked-keys="checkedKeys"
        :props="defaultProps"
        ref="tree"
      >
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { assignPrem } from "@/api/setting";
export default {
  name: "assign",
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
    treeDate: {
      type: Array,
      default: () => [],
    },
    defaultProps: {
      type: Object,
      default: () => {
        return {};
      },
    },
    checkedKeys: {
      type: Array,
      default: () => [],
    },
    currentId: {
      type: String,
      //   default: "",
    },
  },

  data() {
    return {
      data: data,
    };
  },
  methods: {
    async save() {
      // 拿到选中的权限id
      let ids = this.$refs.tree.getCheckedKeys();
      await assignPrem({
        id: this.currentId,
        permIds: ids,
      });
      console.log(ids, this.currentId);
      this.$message.success("分配权限成功");
      this.$parent.isShow = false;
      this.$parent.checkedKeys = [];
      this.$parent.treeDate = []; // 树形数据改为空
    },
    cancel() {
      this.$parent.isShow = false;
      this.$parent.checkedKeys = [];
      this.$parent.treeDate = []; // 树形数据改为空
    },
  },
};
</script>

<style lang='scss'>
.el-dialog__header {
  height: 46px;
}
</style>